<template>
    <div>
        <p>标题</p>
        <el-input v-model="Article.title" placeholder="请输入内容"></el-input>
        <p>摘要</p>
        <el-input v-model="Article.description" placeholder="请输入内容"></el-input>
        <p>关键字</p>

        <el-input v-model="Article.keywords" placeholder="请输入内容"></el-input>

        <div class="zw">
            <p>正文</p>
            <br>
            <quill-editor
                v-model="Article.content"
                class="zz"
                ref="myQuillEditor"
                @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                @change="onEditorChange($event)">
            </quill-editor>
            </div>
        <el-button type="primary" @click="insert">发布</el-button>



        </div>
</template>

<script>
    import { quillEditor } from 'vue-quill-editor'
    import axios from "_axios@0.24.0@axios";
    export default {
        name: "wdwz",
        components:{
            quillEditor
        },
        data(){
            return{
              Article:{
                title:"",
                description:"",
                keywords:"",
                content:""
              }

            }
        },
        methods: {
            onEditorBlur(editor){//失去焦点事件
            },
            onEditorFocus(editor){//获得焦点事件
            },
            onEditorChange({editor,html,text}){//编辑器文本发生变化
                //this.content可以实时获取到当前编辑器内的文本内容
 
            },
            onSubmit() {
                console.log('submit!');
            },
            insert(){
              let that=this;
              that.Article.content=that.Article.content.slice(3,-4);
              axios.post(
                  'http://localhost:9090/api/Member/WenzFaBu',
                  this.$qs.stringify(that.Article)
              ).then(function (response) {
                that.$alert('发布成功', '发布', {
                  confirmButtonText: '确定',
                  callback: action => {
                    that.$router.push({'path':'/loginH/wdwz'})
                  }
                });
              })
            }

        }
    }
</script>

<style scoped lang="less">
    p{
        float: left;
        height: 30px;
        line-height: 30px;
    }
    .zw{
        margin-top: 6px;

    }
.zz{
    margin-top:10px;
}
</style>